{% extends "pages/auth/_layout.html" %}

{% block title %}Verifying your email - {{ project_name }}{% endblock %}

{% block auth_form %}
{# The token is consumed on load rather than behind a button: the user
   already expressed intent by clicking the link in the email. #}
<div x-data="verifyEmail()" x-init="verify()">
  <template x-if="state === 'working'">
    <div>
      <h1 class="text-2xl font-semibold text-white mb-2">Verifying your email</h1>
      <p class="text-sm text-aegis-muted">One moment.</p>
    </div>
  </template>

  <template x-if="state === 'ok'">
    <div>
      <h1 class="text-2xl font-semibold text-white mb-2">Email verified</h1>
      <p class="text-sm text-aegis-muted mb-8">Your account is ready.</p>
      <a href="/login?verified=1"
         class="text-sm text-white border border-aegis-teal bg-aegis-teal/10 rounded px-5 py-2.5 hover:bg-aegis-teal/20 transition-colors">
        Sign in
      </a>
    </div>
  </template>

  <template x-if="state === 'failed'">
    <div>
      <h1 class="text-2xl font-semibold text-white mb-2">That link didn't work</h1>
      <p class="text-sm text-aegis-muted mb-8" x-text="error"></p>
      <a href="/verify-pending"
         class="text-sm text-white border border-aegis-teal bg-aegis-teal/10 rounded px-5 py-2.5 hover:bg-aegis-teal/20 transition-colors">
        Send a new link
      </a>
    </div>
  </template>
</div>

<script>
function verifyEmail() {
  return {
    state: 'working',
    error: '',

    async verify() {
      const token = new URLSearchParams(window.location.search).get('token') || '';
      if (!token) {
        this.state = 'failed';
        this.error = 'This verification link is incomplete.';
        return;
      }
      let resp;
      try {
        resp = await fetch('/api/v1/auth/verify-email', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token: token }),
        });
      } catch (_) {
        this.state = 'failed';
        this.error = 'Could not reach the server. Try the link again.';
        return;
      }
      if (resp.ok) {
        this.state = 'ok';
        return;
      }
      this.state = 'failed';
      this.error = 'This link has expired or already been used.';
    },
  };
}
</script>
{% endblock %}